.indicator-percent {
  display: flex;
  align-items: baseline;

  .indicator-percent--name {
    color: #FFFFFF;
    margin-right: 10px;
    white-space: nowrap;
  }

  .indicator-percent--value {
    position: relative;
  }

  .percent--plus {
    color: #FCD24C;
  }

  .percent--minus {
    color: #35F78D;
  }
  .percent-arrow--up {
    padding-left: 30px;
    color: #FCD24C;
  
    &::before {
      position: absolute;
      content: '';
      top: 40%;
      left: 0;
      width: 0;
      height: 0;
      transform: translateY(-50%);
      border: 10px solid transparent;
      border-bottom: 15px solid #FCD24C;
    }
  }
  
  .percent-arrow--down {
    padding-left: 30px;
    color: #35F78D ;
  
    &::before {
      content: '';
      position: absolute;
      top: 40%;
      left: 0;
      width: 0;
      height: 0;
      border: 10px solid transparent;
      border-top: 15px solid #35F78D;
    }
  }
  
  
  .percent-arrow--up-with-bar {
    padding-left: 30px;
    color: #FCD24C;
  
    &::before {
      position: absolute;
      content: '';
      top: 32%;
      left: 0;
      width: 0;
      height: 0;
      transform: translateY(-50%);
      border: 10px solid transparent;
      border-bottom-color: #FCD24C ;
    }
  
    &::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 5px;
      width: 10px;
      height: 10px;
      background: #FCD24C;
      border: none;
    }
  }
  
  .percent-arrow--down-with-bar {
    padding-left: 30px;
    color: #35F78D ;
  
    &::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 0;
      width: 0;
      height: 0;
      border: 10px solid transparent;
      border-top-color: #35F78D ;
    }
  
    &::after {
      content: '';
      position: absolute;
      top: 32%;
      left: 5px;
      width: 10px;
      height: 10px;
      background: #35F78D;
      border: none;
    }
  }
}

.indicator-percent--large {
  .indicator-percent--name {
    font-size: 36px;
    font-family: 'Giorgio Sans';
    white-space: nowrap;

  }

  .indicator-percent--value {
    font-size: 32px;
    font-family: 'Giorgio Sans';
  }
}

.indicator-percent--normal {
  .indicator-percent--name {
    font-size: 28px;
    font-family: 'Source Han Sans CN';
    white-space: nowrap;

  }

  .indicator-percent--value {
    font-size: 36px;
    font-family: 'Giorgio Sans';
  }
}

.indicator-percent--small {
  .indicator-percent--name {
    font-size: 15px;
    font-family: 'Source Han Sans CN';
    white-space: nowrap;

  }

  .indicator-percent--value {
    font-size: 18px;
    font-family: 'Giorgio Sans';
  }
  
  .percent-arrow--up {
    padding-left: 22px;
    color: #FCD24C;

    &::before {
      top: 40%;
      border: 8px solid transparent;
      border-bottom: 12px solid #FCD24C;
    }
  }


  .percent-arrow--down {
    padding-left: 22px;
    color: #35F78D ;

    &::before {
      top: 40%;
      border: 8px solid transparent;
      border-top: 12px solid #35F78D;
    }
  }

  .percent-arrow--up-with-bar {
    padding-left: 24px;
    color: #FCD24C;

    &::before {
      top: 28%;
    }
  }

  .percent-arrow--down-with-bar {
    padding-left: 24px;
    color: #35F78D;

    &::after {
      top: 28%;
    }

  }

}

